<script setup lang="ts">
import NoteAreaBox from "@/views/Student/note/component/note-area-box.vue";
import CardNote from "@/components/communal/Card/card-note.vue";
import {ref,onMounted} from 'vue'
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
import {useRequest} from "vue-hooks-plus";
import {postNoteQueryNote, postNoteQueryNoteByNoteAbout} from "@/apis/student/modules/note";

const router = useRouter()
// 搜索框设置
const searchValue = ref<string>('')
const onSearch = () => {
  if(!searchValue.value){
    message.warning("没有搜索内容")
    return
  }
  const { data } = useRequest(() => postNoteQueryNoteByNoteAbout({
    data:searchValue.value
  }),{
    onSuccess:(res => {
      message.success("搜索到"+res.data.length+"条数据")
      console.log(res)
      noteList.value = res.data
    })
  })
}
const handelClick = (param:any) => {
  message.info(param)
  router.push({path:'/write',query:{type:'note',id:param}})
}
// 分页
const current = ref<number>(1);
const pageSize = ref<number>(12)
const changePage = (page:any,pageSizes:any) => {
  console.log(page,pageSizes)
  pageSize.value = pageSizes;
}
onMounted(()=>{
  run()
})
// 未分组的笔记列表
const noteList = ref<any>([])
let total = ref<number>(0)
const { data,loading,run } = useRequest(()=>postNoteQueryNote({
  pageNum: current.value,
  pageSize: pageSize.value
}),{
  onSuccess:(res => {
    noteList.value =  res.data.list
    total.value = res.total
    console.log(res)
  }),
  onError:(err =>{
    return;
  }),
  manual:true,
  debounceWait: 1000,
})

</script>

<template>
  <a-card style="height: 100%">
    <note-area-box title="个人笔记">
      <a-flex justify="end" style="margin-bottom: 20px">
        <a-space size="small" style="margin-right: 3rem">
          <a-input-search
              style="width: 360px;"
              v-model:value="searchValue"
              placeholder="输入笔记名称"
              enter-button="笔记搜索"
              size="large"
              @search="onSearch"
          ></a-input-search>
          <a-button type="primary" size="large" @click="run"> 重置 </a-button>
        </a-space>
      </a-flex>
      <a-spin :spinning="loading">
        <a-row :gutter="[16, { xs: 8, sm: 16, md: 24, lg: 32 }]" >
          <a-col :span="4" v-for="iteam in noteList" :key="iteam" >
            <CardNote width="120px" height="181px"
                      :title="iteam.noteName"
                      :cover="iteam.noteCoverImg"
                      :blurb="iteam.noteContent"
                      @click="handelClick(iteam.id)"></CardNote>
          </a-col>
        </a-row>
      </a-spin>
      <a-flex style="margin-top: 20px">
        <a-pagination
            v-model:current="current"
            :total="total"
            :defaultPageSize="12"
            :pageSize="pageSize"
            :pageSizeOptions="['6','12','24','36','48']"
            :hideOnSinglePage="true"
            show-less-items
            @change="changePage"
        />
      </a-flex>
    </note-area-box>
  </a-card>
</template>

<style scoped lang="scss">

</style>

